import React from 'react';
import { Router, Route, Link} from 'react-router'
import Header from './js/components/header';
import Consult from './js/components/consult';
import DoctorStore from './js/doctorStore';
import {Actions} from './js/doctorStore/actions';
require('./css/doctors');
function getDoctor(id){
    return DoctorStore.getDoctor(id)
}
function getDep(id){
    return DoctorStore.getDep(id)
}
function getTitle(id){
    return DoctorStore.getTitle(id)
}
function getComments(id){
    return DoctorStore.getComments(id)
}
function getRating(id){
    return DoctorStore.getRating(id)
}
function getChat(id){
    return DoctorStore.getChat(id)
}
export default class DoctorsDetail extends React.Component{
    constructor(props){
        super(props);
        const _id = this.props.params.id.replace(':','');
        this.state={
            doctor: getDoctor(_id)
        }
    }
    componentDidMount(){
        Actions.ctrlNav({show:false,active:1});
    }
    renderTags(arr,tagName){
        return (arr.map((t,i)=>{
            return <li key={tagName+i}>{t}</li>
        }))
    }
    renderComments(arr){
        const data = getComments(arr);
        return (data.map((t,i)=>{
            return (<li key={'comments_'+i}>
                <Link to={"/chat/:"+t.chat} />
                <dl>
                    <dd className="comm">
                        <h3>{t.user}<em className={"range"+t.level}>{getRating(t.level).name}</em></h3>
                        <ul className="tagList">
                            {this.renderTags(t.tags,('commT_'+i))}
                        </ul>
                    </dd>
                    <dt>{t.title}</dt>
                    <dd className="chat">
                        <p>{getChat(t.chat).contents[0].what}</p>
                    </dd>
                </dl>
            </li>)
        }))
    }
    render(){
        const _query = this.props.location.query['cate'];
        const _doctor = this.state.doctor;
        const _id = this.props.params.id.replace(':','');
        return (
            <div style={{paddingBottom: '66px'}}>
                <Header title='医生详情'>
                    <Link to={'/doctors-list/:'+_query} params={{id:_query}} className="l1">关闭</Link>
                </Header>
                <div className="doctor-detail">
                    <dl id="docMain">
                        <dt>{_doctor.name}</dt>
                        <dd id="docTitle">{getDep(_doctor.depart).name+" | "+getTitle(_doctor.title).name}</dd>
                        <dd id="docAvatar"><img src={"../src/img/doctor-avatar/"+_doctor.id+".jpg"} /></dd>
                        <dd id="docInteraction">
                            <a href="###" id="follow">加关注</a><a href="###" id="praise">赞</a>
                        </dd>
                    </dl>
                    <Consult data={_doctor.price} />
                    <div id="interaction">
                        <ul>
                            <li>粉丝数<em>{_doctor.server.followers}</em></li>
                            <li>服务人数<em>{_doctor.server.workon}</em></li>
                            <li>被赞<em>{_doctor.server.praises}</em></li>
                        </ul>
                    </div>
                    <div id="tagsDoctor" className="infoBox">
                        <div className="ibCont">
                            <div id="skillTags">
                                <h3>擅长</h3>
                                <ul className="tagList">
                                    {this.renderTags(_doctor.tags.skill,'tagSkill_')}
                                </ul>
                            </div>
                            <div id="serverTags">
                                <h3>服务印象</h3>
                                <ul className="tagList">
                                    {this.renderTags(_doctor.tags.server,'tagServer_')}
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div id="aboutDoctor" className="infoBox">
                        <h2 className="ibTitle">医生详情<Link to={"/doctor-info/:"+_id}>更多</Link></h2>
                        <div className="ibCont">
                            <p>{_doctor.info.skill}</p>
                        </div>
                    </div>
                    <div id="comment" className="infoBox">
                        <h2 className="ibTitle">用户评价({_doctor.comments.length})<Link to={"/doctor-comments/:"+_id}>全部评价</Link></h2>
                        <div className="ibCont commentList">
                            {this.renderComments(_doctor.comments)}
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}